<template>
  <el-collapse v-model="activeNames" accordion>
    <el-collapse-item name="1">
      <template #title>
        <div style="font-size: 2vh;font-weight: bolder">
          审核进度
        </div>
      </template>
      <div style="max-height: 45vh;">
        <el-progress :percentage="percentage.toFixed(2)" :color="customColors"/>
        <div v-for="(item,index) in reviewProgress" :key="index">
          {{ item }}
        </div>
      </div>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template #title>
        <div style="font-size: 2vh;font-weight: bolder">
          审核结果
        </div>
      </template>
      <div class="audit_result">
        <div class="audit_result_option">
          <div class="audit_result_option_btn" :class="{ audit_result_option_btn_selected: selectOption === index }"
               @click="select_main(index)" v-for="(item,index) in reviewProgress" :key="index"
               v-show="item.includes(FINISH)">{{ item.replace(this.FINISH, '') }}
          </div>
        </div>
        <div class="audit_result_main">
          <div class="论文文本提取" v-show="selectOption===0">
            {{ result_json.论文文本提取.text }}
          </div>
          <div class="论文结构分析" v-show="selectOption===1">
            <el-descriptions border column="1">
              <el-descriptions-item class="标题" label="标题" align="center" label-align="center">
                <div class="selected_text" @click="lockTheTextPosition(result_json.论文结构分析.标题)">
                  {{ result_json.论文结构分析.标题 }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="作者" label-align="center">
                <div class="作者">
                  <div style="height: auto;text-align: center;padding: 0 1vw;"
                       v-for="(item,index) in result_json.论文结构分析.作者"
                       :key="index">
                    <div class="selected_text" @click="lockTheTextPosition(item)">
                      {{ item }}
                    </div>
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item class="摘要" label="摘要" label-align="center">
                <div class="selected_text" @click="lockTheTextPosition('摘要')">
                  {{
                    String(result_json.论文结构分析.摘要).slice(0, -1) + "……"
                  }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="关键词" label-align="center">
                <div class="关键词">
                  <div style="height: auto;text-align: center;padding: 0 1vw;"
                       v-for="(item,index) in result_json.论文结构分析.关键词"
                       :key="index">
                    <div class="selected_text" @click="lockTheTextPosition('关键词')">
                      {{ item }}
                    </div>
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item class="论文内容" label="论文内容" label-align="center">
                <div style="height: auto;flex: 1" v-for="(item,index) in result_json.论文结构分析.论文内容"
                     :key="index">
                  <div style="font-weight: bolder">
                    <div class="selected_text" @click="lockTheTextPosition(item.标题)">
                      {{ item.标题 }}
                    </div>
                  </div>
                  <div>{{ item.内容 }}</div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item class="参考文献" label="参考文献" label-align="center">
                <div style="height: auto;flex: 1" v-for="(item,index) in result_json.论文结构分析.参考文献"
                     :key="index">
                  <div class="selected_text" @click="lockTheTextPosition(item)">{{ item }}</div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item class="论文大意" label="论文大意" label-align="center">
                {{ result_json.论文结构分析.论文大意 }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="语法错误检测" v-show="selectOption===2"></div>
          <div class="文本错误检测" v-show="selectOption===3"></div>
          <div class="自定义主题" v-show="selectOption===4"></div>
        </div>
      </div>
    </el-collapse-item>
    <el-collapse-item name="3">
      <template #title>
        <div style="font-size: 2vh;font-weight: bolder">
          JSON结果
        </div>
      </template>
      <div class="json_result">
        <div class="json_result_option">
          <div class="json_result_option_btn" :class="{ json_result_option_btn_selected: selectOption === index }"
               @click="select_main(index)" v-for="(item,index) in reviewProgress" :key="index"
               v-show="item.includes(FINISH)">{{ item.replace(this.FINISH, '') }}
          </div>
        </div>
        <div class="json_result_main">
          <div class="json_论文文本提取" v-show="selectOption===0">
            <JsonViewer :value="result_json.论文文本提取" copyable/>
          </div>
          <div class="json_论文结构分析" v-show="selectOption===1">
            <JsonViewer :value="result_json.论文结构分析" copyable/>
          </div>
          <div class="json_语义错误检测" v-show="selectOption===2">
            <JsonViewer :value="result_json.语法错误检测" copyable/>
          </div>
          <div class="json_文本错误检测" v-show="selectOption===3">
            <JsonViewer :value="result_json.文本错误检测" copyable/>
          </div>
          <div class="json_自定义主题" v-show="selectOption===4">
            <JsonViewer :value="result_json.自定义主题" copyable/>
          </div>
        </div>
      </div>
    </el-collapse-item>

  </el-collapse>
</template>

<script>
import {bus} from "@/paper_review/js/bus";
import {url} from "@/util/url";
import JsonViewer from "../../../../util/vue3-json-viewer-master/vue3-json-viewer-master/src/Components/json-viewer";
export default {
  name: "OnlineTestOutPutView",
  data() {
    return {
      ONGOING: "中...",
      FINISH: "完成",
      customColors: [
        {color: '#f53c3c', percentage: 20},
        {color: '#ecaa46', percentage: 40},
        {color: '#96e132', percentage: 60},
        {color: '#5cb88f', percentage: 80},
        {color: '#62b7ef', percentage: 100},
      ],
      activeNames: '1',
      percentage: 0,
      checked: {
        checkedState: [true, true, true, true],
        checkedLabel: ["论文结构分析", "语法错误检测", "文本错误检测", "自定义主题"],
        checkedValue: ['', '', '', '智慧养老服务'],
      },
      reviewProgress: [],
      selectOption: 0,
      textContent: '',
      result_json: {
        论文文本提取: '',
        论文结构分析: '',
        语法错误检测: '',
        文本错误检测: '',
        自定义主题: ''
      }
    }
  },
  mounted() {
    bus.on("sendChecked", this.receiveChecked);
    bus.on("清空参数", this.resetParamValue);
    bus.on("论文文本提取进度", this.ocrProgress);
    bus.on("开始进行其他参数操作(初始化)", this.beginOtherParamDefault);
    bus.on("开始进行其他参数操作", this.beginOtherParam);
  },
  methods: {
    resetParamValue() {
      this.activeNames = '1';
      this.percentage = 0;
      this.checked = {
        checkedState: [true, true, true, true],
        checkedLabel: ["论文结构分析", "语义错误检测", "文本错误检测", "自定义主题"],
        checkedValue: ['', '', '', '智慧养老服务'],
      };
      this.reviewProgress = [];
      this.selectOption = 0;
      this.textContent = '';
      this.result_json = {
        论文文本提取: '',
        论文结构分析: '',
        语法错误检测: '',
        文本错误检测: '',
        自定义主题: ''
      }
    },
    receiveChecked(checked) {
      console.log(checked);
      this.checked = checked;
      this.reviewProgress = ['论文文本提取' + this.ONGOING];
      for (let i = 0; i < checked.checkedState.length; i++) {
        if (checked.checkedState[i]) {
          this.reviewProgress.push(checked.checkedLabel[i] + this.ONGOING);
        }
      }
    },
    select_main(index) {
      this.selectOption = index;
    },
    lockTheTextPosition(text) {
      console.log('单机文本：', text);
      bus.emit("锁定文字位置", text);
    },
    ocrProgress(pro) {
      console.log('ocrProgress：', pro);
      if (pro !== -1) {
        this.percentage = parseFloat(this.percentage) + pro * (100 / this.reviewProgress.length);
      } else {
        this.percentage = Math.ceil(this.percentage);
        this.reviewProgress[0] = '论文文本提取' + this.FINISH;
      }
    },
    beginOtherParamDefault(texts) {
      for (let i = 0; i < texts.length; i++) {
        this.textContent += texts[i] + '\n';
      }
      this.result_json.论文文本提取 = {text: this.textContent};
      for (let i = 0; i < this.reviewProgress.length; i++) {
        if (this.reviewProgress[i].includes(this.ONGOING)) {
          this.toRequest(this.reviewProgress[i].replace(this.ONGOING, ''), true);
        }
      }
    },
    beginOtherParam(texts) {
      for (let i = 0; i < texts.length; i++) {
        this.textContent += texts[i] + '\n';
      }
      this.result_json.论文文本提取 = {text: this.textContent};
      for (let i = 0; i < this.reviewProgress.length; i++) {
        if (this.reviewProgress[i].includes(this.ONGOING)) {
          this.toRequest(this.reviewProgress[i].replace(this.ONGOING, ''));
        }
      }
    },
    toRequest(paramLabel, _default = false) {
      console.log("请求参数", paramLabel);
      // console.log("checked", this.checked);
      switch (paramLabel) {
        case this.checked.checkedLabel[0]:
          console.log('开始' + this.checked.checkedLabel[0]);
          this.thesisStructuralAnalysis(_default);
          break;
        case this.checked.checkedLabel[1]:
          console.log('开始' + this.checked.checkedLabel[1]);
          // this.syntaxErrorDetection(_default);
          break;
        case this.checked.checkedLabel[2]:
          console.log('开始' + this.checked.checkedLabel[2]);
          break;
        case this.checked.checkedLabel[3]:
          console.log('开始' + this.checked.checkedLabel[3]);
          break;
      }
    },
    //论文结构分析
    thesisStructuralAnalysis(_default) {
      // 创建一个 FormData 对象
      let formData = new FormData();
      let path = '/structural_analysis';
      formData.append('default', _default);
      formData.append('text', this.textContent); // 添加 text 参数到 formData 中
      fetch(url + path, {
        method: 'POST',
        body: formData
      }).then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json(); // 将响应解析为 JSON 数据
      }).then(data => {
        console.log(data);
        this.result_json.论文结构分析 = JSON.parse(data.data);
        console.log(this.result_json.论文结构分析);
        //修改进度
        console.log('论文结构分析：', this.FINISH);
        this.percentage += (1 / this.reviewProgress.length) * 100;
        this.reviewProgress[1] = this.checked.checkedLabel[0] + this.FINISH;
      }).catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
      });
    },
    //语法错误检测
    syntaxErrorDetection(_default) {
      _default = false;
      // 创建一个 FormData 对象
      let formData = new FormData();
      let path = '/syntax_error_detection';
      formData.append('default', _default);
      formData.append('text', this.textContent); // 添加 text 参数到 formData 中
      fetch(url + path, {
        method: 'POST',
        body: formData
      }).then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json(); // 将响应解析为 JSON 数据
      }).then(data => {
        console.log(data);
        this.result_json.语法错误检测 = JSON.parse(data.data);
        console.log(this.result_json.语法错误检测);
        //修改进度
        console.log('语法错误检测：', this.FINISH);
        this.percentage += (1 / this.reviewProgress.length) * 100;
        this.reviewProgress[2] = this.checked.checkedLabel[1] + this.FINISH;
      }).catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
      });
    },
  },
  components: {
    JsonViewer
  }
}
</script>

<style scoped lang="scss">
.audit_result {

  .audit_result_option {
    display: flex;
    width: 100%;
    height: 5vh;
    align-items: center;
    justify-content: center;
    padding: 0 2vw;

    .audit_result_option_btn {
      flex: 1;
      font-size: 2vh;
      height: 100%;
      max-width: 30%;
      color: black;
      border: 1px solid #dcdfe5; /* 边框宽度为2像素，实线样式，颜色为黑色 */
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .audit_result_option_btn:hover {
      color: #4287ff;
    }

    .audit_result_option_btn.audit_result_option_btn_selected {
      color: #4287ff;
      border: 1px solid #4287ff; /* 边框宽度为2像素，实线样式，颜色为黑色 */
      box-shadow: 0 4px 4px -2px rgba(66, 135, 255, 0.2), /* 上边框阴影 */
      0 -4px 4px -2px rgba(66, 135, 255, 0.2), /* 下边框阴影 */
      4px 0 4px -2px rgba(66, 135, 255, 0.2), /* 左边框阴影 */
      -4px 0 4px -2px rgba(66, 135, 255, 0.2); /* 右边框阴影 */
    }
  }

  .audit_result_main {
    display: flex;
    flex-direction: column;
    max-height: 39vh; /* 设置最大高度为300像素 */
    overflow-y: auto; /* 当内容超过最大高度时，显示垂直滚动条 */
    .论文结构分析 {
      .selected_text:hover {
        color: #4287ff;
      }

      .标题 {
      }

      .作者 {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .摘要 {
      }

      .关键词 {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .论文内容 {
      }

      .参考文献 {
      }

      .论文大意 {
      }
    }
  }

}

.json_result {

  .json_result_option {
    display: flex;
    width: 100%;
    height: 5vh;
    align-items: center;
    justify-content: center;
    margin: 1vh 0;
    padding: 0 2vw;

    .json_result_option_btn {
      flex: 1;
      font-size: 2vh;
      height: 100%;
      max-width: 30%;
      color: black;
      border: 1px solid #dcdfe5; /* 边框宽度为2像素，实线样式，颜色为黑色 */
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .json_result_option_btn:hover {
      color: #4287ff;
    }

    .json_result_option_btn.json_result_option_btn_selected {
      color: #4287ff;
      border: 1px solid #4287ff; /* 边框宽度为2像素，实线样式，颜色为黑色 */
      box-shadow: 0 4px 4px -2px rgba(66, 135, 255, 0.2), /* 上边框阴影 */
      0 -4px 4px -2px rgba(66, 135, 255, 0.2), /* 下边框阴影 */
      4px 0 4px -2px rgba(66, 135, 255, 0.2), /* 左边框阴影 */
      -4px 0 4px -2px rgba(66, 135, 255, 0.2); /* 右边框阴影 */
    }
  }

  .json_result_main {
    display: flex;
    flex-direction: column;
    max-height: 39vh; /* 设置最大高度为300像素 */
    overflow-y: auto; /* 当内容超过最大高度时，显示垂直滚动条 */
  }

}
</style>